<template>
  <v-chart :option="option" style="height: 300px;" />
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  data: { name: string; value: number }[]
}>()

const option = computed(() => ({
  tooltip: { trigger: 'item' },
  legend: { top: 'bottom' },
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'], // 改为环形图
      avoidLabelOverlap: false,
      label: {
        show: true,
        formatter: '{b}: {d}%', // 显示百分比
        position: 'outside'
      },
      data: props.data,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0,0,0,0.5)'
        }
      }
    }
  ]
}))
</script>
